<template>
  <div>
    <div class="desc">反向生成 enJson 对象</div>
    <br />
    <div class="items-center" style="justify-content: space-around">
      <button @click="generateEnJson">生成 enJson 对象</button>
      <button @click="downloadEnJson" :disabled="!enJsonObject">
        下载 enJson.json
      </button>
    </div>

    <div v-if="enJsonObject" style="width: 100vw">
      <div class="desc">生成的 enJson 对象：</div>
      <pre>{{ enJsonObject }}</pre>
    </div>
  </div>
</template>

<script setup>
// 如果使用 TypeScript，可以修改为 <script setup lang="ts">
import { ref } from "vue";
import { saveAs } from "file-saver";
// import xby from "./xby.json";

const props = defineProps({
  source: {},
});

const jsonInput = ref(props.source);
console.log("jsonInput:", jsonInput.value[0]);

const enJsonObject = ref(null);

// 反向生成 enJson 的函数
const generateEnJson = () => {
  try {
    const jsonArray = jsonInput.value;
    if (!Array.isArray(jsonArray)) {
      alert("输入的数据应为 JSON 数组形式。");
      return;
    }
    const result = {
      zh: {},
      en: {},
      indonesia: {},
      mys: {},
      pt: {},
      vi: {},
    };

    const analysis = (lang) => {
      jsonArray.forEach((item) => {
        const { fileKey } = item;

        if (!fileKey || typeof item[lang] !== "string") {
          // 忽略格式不正确的项
          return;
        }

        const keys = fileKey.split("-");
        let current = result[lang];

        keys.forEach((key, index) => {
          if (index === keys.length - 1) {
            current[key] = item[lang];
          } else {
            if (!current[key]) {
              current[key] = {};
            } else if (typeof current[key] !== "object") {
              // 如果中间层已经是字符串，无法嵌套，报错
              alert(`键冲突: ${key} 已经是一个字符串，无法嵌套下一级键。`);
              throw new Error(`键冲突: ${key}`);
            }
            current = current[key];
          }
        });
      });
    };

    Object.keys(result).forEach((lang) => {
      analysis(lang);
    });

    enJsonObject.value = JSON.stringify(result, null, 2);
    showToast("enJson 对象生成成功！");
  } catch (error) {
    showToast("解析 JSON 数据时出错，请检查输入格式。");
    console.error(error);
  }
};

// 下载 enJson 对象的函数
const downloadEnJson = () => {
  if (!enJsonObject.value) return;

  const blob = new Blob([enJsonObject.value], {
    type: "application/json;charset=utf-8;",
  });
  saveAs(blob, "enJson.json");
};
</script>

<style lang="scss" scoped>
textarea {
  width: 100%;
  max-width: 600px;
  margin-bottom: 10px;
}

.desc {
  width: 100vw;
  margin: 12 * 2px;
  font-size: 17 * 2px;
  font-weight: 400;
}

button {
  padding: 10 * 2px 20 * 2px;
  background-color: #67c23a;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

button:hover:not(:disabled) {
  background-color: #85ce61;
}

pre {
  background-color: #f5f7fa;
  padding: 12 * 2px;
  border-radius: 4 * 2px;
  width: 100vw; /* 让预格式化文本的宽度为100% */
  max-width: 100vw;
  height: 300 * 2px; /* 让预格式化文本的高度为100%视口高度 */
  overflow-y: scroll;
  margin: 0; /* 清除默认边距 */
  box-sizing: border-box; /* 包含内边距和边框在内的宽高计算方式 */
}
</style>
